<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-04-19 20:32:15
 * @LastEditors: wangshuguang
 * @Description:  退款记录
-->
<template>
	<div class="common-container">
		<!-- 筛选条件 -->
		<el-card>
			<el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
				<el-row>
					<el-col :span="24" prop="date">
						<el-form-item label="时间">
							<el-radio-group v-model="filterDate" size="small" @change="dataRadioChange">
								<el-radio-button :label="1">今天</el-radio-button>
								<el-radio-button :label="2">昨天</el-radio-button>
								<el-radio-button :label="7">近7天</el-radio-button>
								<el-radio-button :label="15">近15天</el-radio-button>
								<el-radio-button :label="30">近30天</el-radio-button>
								<el-radio-button label="nowMonth">本月</el-radio-button>
							</el-radio-group>
							&nbsp;
							<el-date-picker
								v-model="filterTime"
								:clearable="false"
								format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss"
								:default-time="['00:00:00', '23:59:59']"
								size="small"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="pickerChange"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="退款方式" prop="payType">
							<el-select v-model="listQuery.payType" clearable placeholder="请选择" size="small" class="width100">
								<el-option label="全部" value="" />
								<el-option label="微信" value="1" />
								<el-option label="余额" value="2" />
								<el-option label="支付宝" value="3" />
							</el-select>
						</el-form-item>
					</el-col>

					<div v-show="showMoreFilter">
						<el-col :span="12">
							<el-form-item label="退款状态" prop="refStatus">
								<el-select v-model="listQuery.refStatus" clearable placeholder="请选择" size="small" class="width100">
									<el-option label="全部" value="" />
									<el-option label="退款成功" value="1" />
									<el-option label="退款中" value="0" />
									<el-option label="退款失败" value="2" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退款门店" prop="shopId">
								<el-select v-model="listQuery.shopId" filterable size="small" class="width100" placeholder="可通过名称搜索" style="width:300px">
									<el-option v-for="(item, index) in $store.state.user.allManageShopFilterOptions" :key="index" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务类型" prop="type">
								<el-select v-model="listQuery.type" clearable placeholder="请选择" size="small" class="width100">
									<el-option label="全部" value="" />
									<el-option label="会员充值" value="2" />
									<el-option label="会员开卡" value="34" />
									<el-option label="商城" value="5" />
									<el-option label="点餐" value="6" />
									<el-option label="预订" value="7" />
									<el-option label="赠送会员" value="9" />
									<el-option label="会员续费" value="10" />
									<el-option label="码牌退款" value="14" />
									<el-option label="收款" value="15" />
									<el-option label="插件返佣" value="16" />
									<el-option label="预约" value="17" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="原业务来源" prop="source">
								<el-select v-model="listQuery.source" clearable placeholder="请选择" size="small" class="width100">
									<el-option label="全部" value="" />
									<el-option label="微信会员小程序" value="1" />
									<el-option label="聚合支付" value="9" />
									<el-option label="商户app" value="10" />
									<el-option label="POS机app" value="4" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="使用插件" prop="pluginCode">
								<el-select v-model="listQuery.pluginCode" clearable placeholder="请选择" size="small" class="width100">
									<el-option label="全部" value="" />
									<el-option label="未使用插件" value="0" />
									<el-option label="超级会员" value="supermember" />
									<el-option label="储值AI" value="2" />
									<el-option label="满减满折" value="discount" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="实退金额区间" prop="beginAmt">
								<el-input v-model="listQuery.beginAmt" placeholder="最低价" type="number" style="width:100px" :controls="false" size="small" />
								<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
								<el-input v-model="listQuery.endAmt" placeholder="最高价" type="number" style="width:100px" :controls="false" size="small" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退款单号" prop="refundNo">
								<el-input v-model="listQuery.refundNo" clearable placeholder="请输入" size="small" class="width100" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支付单号" prop="paymentNo">
								<el-input v-model="listQuery.paymentNo" clearable placeholder="请输入" size="small" class="width100" />
							</el-form-item>
						</el-col>
					</div>
					<el-col :span="12">
						<el-form-item>
							<el-button type="primary" round size="small" @click="fetchData">查询</el-button>
							<el-button type="primary" round size="small" @click="resetForm('filterForm')">重置</el-button>
							<el-button type="text" round size="small" @click="showMoreFilter = !showMoreFilter">{{ showMoreFilter ? '收起高级选项' : '展开高级选项' }}</el-button>
							<el-button type="text" round size="small" @click="downFile">导出为excel</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<!-- 数据看板 -->
		<div class="dataCard">
			<el-card>
				<div class="title">退款成功金额/元</div>
				<div class="money">{{ dataCard.refundAmt || 0 }}</div>
				<div class="content">
					<div>共{{ dataCard.refundNum }}笔交易</div>
				</div>
			</el-card>
		</div>
		<div class="dataList">
			<el-table size="medium" :data="list" border>
				<el-table-column prop="roleTypeZh" align="center" label="序号">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="refundMethodZh" align="center" label="退款方式" />
				<el-table-column prop="refundNo" align="center" label="退款单号" />
				<el-table-column prop="paymentNo" align="center" label="支付单号" />
				<el-table-column prop="typeZh" align="center" label="业务类型" />
				<el-table-column prop="sourceZh" align="center" label="原业务来源" />
				<el-table-column prop="orderNo" align="center" label="原业务单号" />
				<el-table-column prop="pluginCodeZh" align="center" label="使用插件" />
				<el-table-column prop="shopName" align="center" label="退款门店" />
				<el-table-column prop="totalFee" align="center" label="原订单金额/元" />
				<el-table-column prop="refundFee" align="center" label="申请退款金额/元" />
				<el-table-column prop="realRefundFee" align="center" label="实退金额/元" />
				<el-table-column prop="refundStatusZh" align="center" label="退款状态" />
				<el-table-column prop="createTime" align="center" label="发起退款时间" />
				<el-table-column prop="remark" align="center" label="备注" width="200" />
				<el-table-column prop="statisticalTime" align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="viewData(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-container">
				<el-pagination
					:current-page.sync="listQuery.pageNum"
					:page-size="listQuery.pageSize"
					:total="total"
					layout="total, prev, pager, next"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<!-- 详情弹框 -->
		<el-dialog title="退款订单详情" :visible.sync="orderDetailVisible" width="70%"><RefundHisDetail v-if="orderDetailVisible" :info-config="infoConfig" /></el-dialog>
	</div>
</template>

<script>
import { qryRefundRecord, exportMercRefund } from '@/api/payCenter';
import { mapGetters } from 'vuex';
import RefundHisDetail from './components/RefundHisDetail.vue';
import { dateFtt, removePropertyOfNull } from '@/utils';
import { getFilterFormPastTime } from '@/utils/format';

export default {
	components: { RefundHisDetail },
	data() {
		return {
			orderDetailVisible: false,
			showMoreFilter: false,
			infoVisible: false,
			infoConfig: {},
			form: {},
			dataCard: {},
			scope: 0,
			total: 0,
			filterDate: 1,
			filterTime: [],
			listQuery: {
				pageNum: 1,
				pageSize: 10,
				pluginCode: '',
				refundNo: '',
				paymentNo: '',
				payType: '',
				refStatus: '',
				type: '',
				shopId: '',
				beginAmt: '',
				source: '',
				endAmt: '',
				beginTime: '',
				endTime: ''
			},
			list: []
		};
	},

	computed: {
		...mapGetters(['businessInfo', 'userInfo'])
	},
	async mounted() {
		// 设置时间查询默认值
		this.filterDate = 1;
		this.dataRadioChange(1);
	},
	methods: {
		viewData(data) {
			this.infoConfig = data;
			this.orderDetailVisible = true;
		},
		pickerChange(val) {
			// 时间筛选条件切换
			console.log('pickerChange', val);
			this.listQuery.beginTime = val[0];
			this.listQuery.endTime = val[1];
			this.filterDate = '';
			this.fetchData();
		},
		async dataRadioChange(val) {
			// 时间tab切换
			let dateArr = [];
			if (val == 'nowMonth') {
				dateArr = await getFilterFormPastTime('nowMonth');
			} else if (val == 2) {
				dateArr = await getFilterFormPastTime('yesterday');
			} else {
				dateArr = await getFilterFormPastTime(val);
			}
			this.listQuery.beginTime = dateArr[0];
			this.listQuery.endTime = dateArr[1];
			console.log('val', val, dateArr);
			this.filterTime = [];
			this.fetchData();
		},
		// 重置
		resetForm(formName) {
			this.filterDate = 1;
			this.listQuery.endAmt = '';
			this.listQuery.beginAmt = '';
			this.$refs[formName].resetFields();
			this.dataRadioChange(1);
		},
		downFile() {
			let { isAdmin, shopId } = this.userInfo;
			const obj = {
				...this.listQuery,
				shopId: !isAdmin && !this.listQuery.shopId ? shopId : this.listQuery.shopId,
			};
			exportMercRefund(removePropertyOfNull(obj)).then(res => {
				console.log('res', res);
				if (res.code === 0) {
					this.$alert('数据导出中，请稍后到数据下载中心进行下载', '提示', {
						confirmButtonText: '确定',
						center: true,
						type: 'success',
						callback: action => {}
					});
				}
			});
		},
		fetchData() {
			let { isAdmin, shopId } = this.userInfo;
			const obj = {
				...this.listQuery,
				shopId: !isAdmin && !this.listQuery.shopId ? shopId : this.listQuery.shopId,
			};
			qryRefundRecord(removePropertyOfNull(obj)).then(res => {
				if (res.code === 0) {
					const { list, total } = res.data.pageList;
					console.log('res', res);
					this.list = list;
					this.total = total;
					this.dataCard = {
						...res.data,
						pageList: null
					};
				}
			});
		},
		handleSizeChange(val) {
			this.listQuery.pageSize = val;
			this.fetchData();
		},
		handleCurrentChange(val) {
			this.listQuery.pageNum = val;
			this.fetchData();
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.labelText {
	color: rgb(115, 115, 115);
	font-size: 12px;
}
.common-container {
	// background: #fff;
	border-radius: 5px;
	padding: 20px;
	.dataCard {
		display: flex;
		/deep/.el-card {
			margin: 10px 10px 10px 0;
			min-width: 200px;
			.el-card__body {
				padding: 10px 20px;
				.title {
					border-left: 3px solid #ffb72f;
					padding-left: 5px;
				}
				.money {
					font-size: 20px;
					margin-top: 15px;
				}
				.content {
					margin-top: 15px;
					font-size: 12px;
				}
			}
		}
	}
	.dataList {
		background: #fff;
	}
}
</style>
